<template>

  <div class="login-container">

    <img src="@/assets/logo.png" style="text-align: center;width: 100px;"/>

    <form class="login-form">

      <div style="text-align: left;margin: 10px;">用户名</div>
      <input type="text" v-model="username"/> <br/>

      <div style="text-align: left;margin: 10px;">密码</div>
      <input type="password" v-model="password"/>

      <br/>
      <br/>
    </form>

    <div style="margin: 5px;">
      <van-button type="info" size="large" @click="onSubmit">登陆</van-button>
    </div>

  </div>

</template>

<script>
import {pms} from "@/api/pms";
import {Toast} from "vant";

export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
        }
      },
      immediate: true,
    },
  },
  created() {
  },
  mounted() {
    // 绑定enter事件
  },
  destroyed() {
    // 销毁enter事件
  },
  methods: {
    onSubmit() {
      let data = {'username': this.username, 'password': this.password};
      pms.login(data).then((res) => {
        Toast('登陆成功');
        this.$router.replace("/home");
      });
      console.log('submit', data);
    },
  },
};
</script>

<style lang="scss" scoped>

.login-form {
  height: 100%;
}

input {
  width: 95%;
  height: 36px;
  outline-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.login-container {
  text-align: center;
  margin: 20px 5px 5px;
}

</style>
